import React, { lazy } from 'react'
import { Navigate } from 'react-router-dom'
import Home from '@/views/Home'
import Login from '@/views/Login'

const Page1 = lazy(() => import('@/views/Page1'))
const Page2 = lazy(() => import('@/views/Page2'))
const Page301 = lazy(() => import('@/views/Page3/Page301'))
const Page302 = lazy(() => import('@/views/Page3/Page302'))
const Page303 = lazy(() => import('@/views/Page3/Page303'))
const Page401 = lazy(() => import('@/views/Page4/Page401'))
const Page402 = lazy(() => import('@/views/Page4/Page402'))
const Page5 = lazy(() => import('@/views/Page5'))

// const About = lazy(() => import('@/views/About'))

const withLoadingComponent = (comp: JSX.Element) => {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>{comp}</React.Suspense>
  )
}
const routes = [
  {
    path: '/',
    breadcrumbName: '首页',
    element: <Navigate to="/page1" />,
  },
  {
    path: '/',
    breadcrumbName: '首页',
    element: <Home />,
    children: [
      {
        path: '/page1',
        breadcrumbName: '栏目1',
        element: withLoadingComponent(<Page1 />),
      },
      {
        path: '/page2',
        breadcrumbName: '栏目2',
        element: withLoadingComponent(<Page2 />),
      },
      {
        path: '/page3',
        breadcrumbName: '栏目3',
        children: [
          {
            path: '/page3/page301',
            breadcrumbName: '栏目301',
            element: withLoadingComponent(<Page301 />),
          },
          {
            path: '/page3/page302',
            breadcrumbName: '栏目302',
            element: withLoadingComponent(<Page302 />),
          },
          {
            path: '/page3/page303',
            breadcrumbName: '栏目303',
            element: withLoadingComponent(<Page303 />),
          },
        ],
      },
      {
        path: '/page4',
        breadcrumbName: '栏目4',
        children: [
          {
            path: '/page4/page401',
            breadcrumbName: '栏目401',
            element: withLoadingComponent(<Page401 />),
          },
          {
            path: '/page4/page402',
            breadcrumbName: '栏目402',
            element: withLoadingComponent(<Page402 />),
          },
        ],
      },
      {
        path: '/page5',
        breadcrumbName: '栏目5',
        element: withLoadingComponent(<Page5 />),
      },
    ],
  },
  {
    path: '/login',
    breadcrumbName: '登录',
    element: <Login />,
  },
  {
    path: '*',
    breadcrumbName: '错误',
    element: <Navigate to="/page1" />,
  },
  // {
  //   path: '/',
  //   element: <About></About>,
  //   children: [
  //     {
  //       path: '/page1',
  //       element: withLoadingComponent(<Page1 />),
  //     },
  //   ],
  // },
]

export default routes
